<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测'"> </Breadcrumb>
        <view class="content">
          <view class="option">
            <view class="option_content">
              <view class="option_name">学段</view>
              <view class="option_select">
                <view class="option_select_content" @click="periodShow = true">
                  <view class="option_select_name">
                    {{ periodValue | periodFilter }}
                  </view>
                  <view class="option_select_icon">
                    <u-icon name="arrow-down"></u-icon>
                  </view>
                </view>
                <u-select
                  v-model="periodShow"
                  mode="single-column"
                  :list="periodOptions"
                  @confirm="periodConfirm"
                ></u-select>
              </view>
            </view>
            <view class="option_content">
              <view class="option_name">年级</view>
              <view class="option_select">
                <view class="option_select_content" @click="gradeShow = true">
                  <view class="option_select_name">
                    {{ gradeValue | gradeFilter }}
                  </view>
                  <view class="option_select_icon">
                    <u-icon name="arrow-down"></u-icon>
                  </view>
                </view>
                <u-select
                  v-model="gradeShow"
                  mode="single-column"
                  :list="gradeOptions"
                  @confirm="gradeConfirm"
                ></u-select>
              </view>
            </view>
            <view class="option_content">
              <view class="option_name">版本</view>
              <view class="option_select">
                <view class="option_select_content" @click="editionShow = true">
                  <view class="option_select_name">
                    {{ editionLabel }}
                  </view>
                  <view class="option_select_icon">
                    <u-icon name="arrow-down"></u-icon>
                  </view>
                </view>
                <u-select
                  v-model="editionShow"
                  mode="single-column"
                  :list="editionOptions"
                  @confirm="editionConfirm"
                ></u-select>
              </view>
            </view>
            <view class="option_content">
              <view class="option_name">教材</view>
              <view class="option_select">
                <view class="option_select_content" @click="bookShow = true">
                  <view class="option_select_name">
                    {{ bookLabel }}
                  </view>
                  <view class="option_select_icon">
                    <u-icon name="arrow-down"></u-icon>
                  </view>
                </view>
                <u-select
                  v-model="bookShow"
                  mode="single-column"
                  :list="bookOptions"
                  @confirm="bookConfirm"
                ></u-select>
              </view>
            </view>
            <view class="option_content">
              <view class="option_name">评测类型</view>
              <view class="option_select">
                <view class="option_select_content" @click="wordShow = true">
                  <view class="option_select_name">
                    {{ wordValue | wordFilter }}
                  </view>
                  <view class="option_select_icon">
                    <u-icon name="arrow-down"></u-icon>
                  </view>
                </view>
                <u-select
                  v-model="wordShow"
                  mode="single-column"
                  :list="wordOptions"
                  @confirm="wordConfirm"
                ></u-select>
              </view>
            </view>
            <view class="button" @click="startEvaluation">
              <text>测</text>
            </view>
          </view>
          <view class="box">
            <view class="report">
              <view class="report_title"> 最新智能推荐报告 </view>
              <view class="report_date">
                {{ reportTime }}
              </view>
              <view class="report_content">
                <view v-for="(item, index) in reportList" :key="index">
                  {{ item }}
                </view>
              </view>
            </view>
            <view class="record">
              <view class="record_title"> 历史记录 </view>
              <view class="record_option">
                <view
                  :class="{ active: recordType === '1' }"
                  @click="getRecord('1')"
                  >单词听写</view
                >
                <view
                  :class="{ active: recordType === '2' }"
                  @click="getRecord('2')"
                  >单词听选</view
                >
              </view>
              <view class="record_content">
                <view class="record_content_text">
                  <text>年级</text>
                  <text>成绩</text>
                  <text>用时</text>
                  <text>金币奖励</text>
                  <text>段位变化</text>
                  <text>评测时间</text>
                </view>
                <view
                  class="record_content_text extra"
                  v-for="(item, index) in recordList"
                  :key="index"
                >
                  <text>{{ item.grade | gradeFilter }}</text>
                  <text>{{ item.score }}</text>
                  <text>{{ item.useTime }}分钟</text>
                  <text>{{ item.goldNum }}</text>
                  <text>{{ item.rankChange }}</text>
                  <text>{{ item.createTime.substring(0, 10) }}</text>
                </view>
              </view>
              <view class="record_title"> 成长记录 </view>
              <view class="record_chart">
                <template v-if="recordChartList.length > 0">
                  <qiun-data-charts
                    type="line"
                    :chartData="chartData"
                    background="none"
                    :opts="opts"
                  />
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  chapterTreeSelect,
  evaluationRecord,
  evaluationChart,
} from "@/api/sync";
export default {
  components: {},
  filters: {
    gradeFilter(status) {
      const statusMap = {
        1: "一年级",
        2: "二年级",
        3: "三年级",
        4: "四年级",
        5: "五年级",
        6: "六年级",
        7: "七年级",
        8: "八年级",
        9: "九年级",
        10: "高一",
        11: "高二",
        12: "高三",
      };
      return statusMap[status];
    },
    periodFilter(status) {
      const statusMap = {
        1: "小学",
        2: "初中",
        3: "高中",
      };
      return statusMap[status];
    },
    wordFilter(status) {
      const statusMap = {
        1: "单词听写",
        2: "单词听选",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      periodShow: false,
      periodOptions: [
        {
          value: "1",
          label: "小学",
        },
        {
          value: "2",
          label: "初中",
        },
        {
          value: "3",
          label: "高中",
        },
      ],
      periodValue: "1",
      gradeShow: false,
      gradeOptions: [],
      gradeValue: "",
      editionShow: false,
      editionOptions: [],
      editionValue: "",
      editionLabel: "",
      bookShow: false,
      bookOptions: [],
      bookValue: "",
      bookLabel: "",
      wordShow: false,
      wordOptions: [
        {
          value: "1",
          label: "单词听写",
        },
        {
          value: "2",
          label: "单词听选",
        },
      ],
      wordValue: "1",
      evaluationValue: "1",
      pageNo: 1,
      pageSize: 5,
      total: 0,
      recordList: [],
      recordChartList: [],
      recordType: "1",
      chartData: {},
      opts: {
        loadingType: 1,
        enableScroll: true,
        fontColor: "#fff",
        xAxis: {
          itemCount: 4,
        },
      },
      reportList: [],
      reportTime: "",
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      // default
      this.handleChangePeriod();
      this.getRecord();
    },
    handleChangePeriod() {
      let params = {
        period: this.periodValue,
      };
      chapterTreeSelect(params).then((res) => {
        this.gradeOptions = res.data.grades;
        this.gradeValue = this.gradeOptions[0].value;
        this.editionOptions = res.data.editions;
        this.editionValue = this.editionOptions[0].value;
        this.editionLabel = this.editionOptions[0].label;
        this.bookOptions = res.data.books;
        this.bookValue = this.bookOptions[0].value;
        this.bookLabel = this.bookOptions[0].label;
      });
    },
    handleChangeGrade() {
      let params = {
        period: this.periodValue,
        grade: this.gradeValue,
      };
      chapterTreeSelect(params).then((res) => {
        this.editionOptions = res.data.editions;
        this.editionValue = this.editionOptions[0].value;
        this.editionLabel = this.editionOptions[0].label;
        this.bookOptions = res.data.books;
        this.bookValue = this.bookOptions[0].value;
        this.bookLabel = this.bookOptions[0].label;
      });
    },
    handleChangeEdition() {
      let params = {
        period: this.periodValue,
        grade: this.gradeValue,
        bookEdition: this.editionValue,
      };
      chapterTreeSelect(params).then((res) => {
        this.bookOptions = res.data.books;
        this.bookValue = this.bookOptions[0].value;
        this.bookLabel = this.bookOptions[0].label;
      });
    },
    getRecord(type) {
      if (type) {
        if (this.recordType === type) return;
        this.recordType = type;
      }
      let params = {
        type: this.recordType,
      };
      evaluationRecord(this.queryParams, params).then((res) => {
        this.recordList = res.data.records;
        this.total = res.data.total;
        if (this.recordList.length > 0) {
          this.reportTime = res.data.records[0].createTime;
          this.reportList =
            res.data.records[0].examReport.split(/[(\r\n)\r\n]+/);
        } else {
          this.reportTime = "";
          this.reportList = [];
        }
      });
      this.getRecordChart();
    },
    getRecordChart() {
      evaluationChart(this.recordType).then((res) => {
        this.recordChartList = res.data;
        this.initEcharts(this.recordChartList);
      });
    },
    handleCurrentChange() {
      this.getRecord();
    },
    initEcharts(chartData) {
      this.chartData = {
        series: chartData,
      };
    },
    periodConfirm(e) {
      if (e[0].value === this.periodValue) return;
      this.periodValue = e[0].value;
      this.handleChangePeriod();
    },
    gradeConfirm(e) {
      if (e[0].value === this.gradeValue) return;
      this.gradeValue = e[0].value;
      this.handleChangeGrade();
    },
    editionConfirm(e) {
      if (e[0].value === this.editionValue) return;
      this.editionValue = e[0].value;
      this.handleChangeEdition();
    },
    bookConfirm(e) {
      this.bookValue = e[0].label;
    },
    wordConfirm(e) {
      this.wordValue = e[0].value;
    },
    startEvaluation() {
      uni.navigateTo({
        url: `/pages/evaluation/evaluationDetail?bookId=${this.bookValue}&wordType=${this.wordValue}&evaluationType=${this.evaluationValue}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./evaluation";
</style>
